
var args = window.location.href.split('?')[1].split('=');

file = args[args.length-1]

$.ajax('/chart?file=' + file).done(function(data) {
    var ipInfoRefresh = function() {
        $('#iptable tr:gt(0)').each(function() {
            var td = $(this).children();

            var ip = td.eq(0).text();
            var re = /^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/;
            if (re.test(ip) && td.eq(2).text().length == 0) {
                $.ajax('/ip/' + ip).done(function(data) {
                    td.eq(2).text(data)
                })
            }
        })
    }

    var moreOrLess = function(vid, vtr) {
        var t = new Date()
        $(vid).append(vtr)
        $(vid + ' tr:gt(11)').hide()
        $(vid + ' tr:visible:last').after('<tr class="more"><td colspan=10 class="text-center"><a>..More..</a></td></tr>')
        console.log(new Date() - t)
        $(vid + ' tr td > a').click(function() {
            var t = new Date()
            $(vid + ' tr:visible:last').remove()
            $(vid + ' tr:hidden').show()
            console.log(new Date() - t)
        })
    }
    var ipTr = '<tr><td>ip</td><td>count</td><td>Info</td></tr>';
    for (var i in data.ip) {
        ipTr += '<tr><td>' + data.ip[i][0] + '</td><td>' + data.ip[i][1] + '</td><td></td></tr>'
    }

    var refererTr = '<tr><td>referer</td><td>count</td></tr>';
    for (var i in data.referer) {
        refererTr += '<tr><td style="word-break: break-all;"><a target="blank" href="' + data.referer[i][0] + '">' + data.referer[i][0] + '</a></td><td>' + data.referer[i][1] + '</td></tr>'
    }

    var ghostTr = '<tr><td>ghsot</td><td>count</td></tr>';
    for (var i in data.ghost) {
        ghostTr += '<tr><td style="word-break: break-all;">' + data.ghost[i][0] + '</td><td>' + data.ghost[i][1] + '</td></tr>'
    }

    var targetTr = '<tr><td>target</td><td>count</td><td>4XX</td></tr>';
    for (var i in data.target) {
        var target = data.target[i][0].split(' ');
        var t = target[0] + ' ' + target[1],
            l4 = target[2].substr(0, 1) === '4' ? target[2] : '-';
        if (l4 !== '-') {
            targetTr += '<tr class="danger"><td style="word-break: break-all;">' + t + '</td><td>' + data.target[i][1] + '</td><td>' + l4  + '</td></tr>'
        } else {
            targetTr += '<tr><td style="word-break: break-all;">' + t + '</td><td>' + data.target[i][1] + '</td><td>' + l4  + '</td></tr>'
        }
    }

    moreOrLess('#iptable', ipTr)
    ipInfoRefresh() // 更新IP城市
    moreOrLess('#referer', refererTr)
    moreOrLess('#target', targetTr)
    moreOrLess('#ghost', ghostTr)






    // ReqTime
    var reqTimeChart = echarts.init(document.getElementById('reqtime'));
    var reqTimeDate = new Array(),
        reqTimeCount = new Array();

    for (var i in data.req_time) {
        reqTimeDate.push(data.req_time[i][0])
        reqTimeCount.push(data.req_time[i][1])
    }

    var reqTimeOption = {
        title: {
            text: '请求时间'
        },
        tooltip: {},
        legend: {
            data:['请求数']
        },
        xAxis: {
            data: reqTimeDate
        },
        yAxis: {},
        series: [{
            name: '请求数',
            type: 'bar',
            data: reqTimeCount
        }]
    };
    reqTimeChart.setOption(reqTimeOption);


    var statusChart = echarts.init(document.getElementById('status'));
    var status = new Array(),
        statusName = new Array();

    for (var i in data.status) {
        status.push({name: data.status[i][0], value: data.status[i][1]})
        statusName.push(data.status[i][0])
    }

    statusOption = {
        title : {
            text: 'HTTP Status',
            subtext: '',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: statusName
        },
        series : [
            {
                name: 'HTTP Status',
                type: 'pie',
                radius : '55%',
                center: ['50%', '60%'],
                data:status,
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    statusChart.setOption(statusOption);

    $('#info').remove()
})
